import {
    Scene,
    Router,
    Actions,
    Reducer,
    ActionConst,
    Overlay,
    Tabs,
    Modal,
    Drawer,
    Stack,
    Lightbox,
} from 'react-native-router-flux'

import React, { Component } from 'react'
import routeConfigs from './router_config'

const reducerCreate = params => {
    params.refresh 
    const defaultReducer = new Reducer(params);
    return (state, action) => {
        console.log('ACTION:',action)
        console.log(Actions.currentScene)
        return defaultReducer(state, action);
    };
};

const getSceneStyle = () => ({
    backgroundColor: 'white',
    shadowOpacity: 1,
    shadowRadius: 3,
});

const onBackPress = () => {
    if (Actions.state.index !== 0) {
        return false
    }
    Actions.pop()
    return true
}

/**
 * 在创建scene 时，需要知道 组件在进入，离开时的回调，可以这样写
 */
function getCurrentScene(item , subType) {
    let ref = React.createRef() //创建ref
    let Comp = item.component
    let Com = () => <Comp ref={ref} />
    return (
    <Scene key={item.name} 
        title={item.title}
        initial={item.initial} 
        back={subType != 'tab'}
        backButtonTintColor='#ff9421'
        hideNavBar={false}
        onEnter={() => { // 进入调用
            if (ref.current && ref.current.onEnter) {
                ref.current.onEnter()   
            }
        }} 
        onExit={() => { // 离开时调用
            if (ref.current && ref.current.onExit) {
                ref.current.onExit()
            }
        }}
        component={Com}>
    </Scene>
    )
}


function configRoutes(config , subType) {
    return config.map((item , index) => {
        let type = item.type
        if (type == 'scene') {
            return getCurrentScene(item , subType)
        }
        if(type == 'tab' && item.childrens && item.childrens.length > 0) {
            let childrens = configRoutes(item.childrens , type)
            return <Scene  swipeEnabled key={item.name} 
                        wrap={true}
                        hideNavBar
                        tabs
                        tabBarPosition='bottom'
                        >{childrens}</Scene>
        }
        if (type == 'modal' && item.childrens && item.childrens.length > 0) {
            let childrens = configRoutes(item.childrens , type)
            return  <Scene key={item.name} modal hideNavBar hideTabBar>
                {childrens}
            </Scene>
        }
        if (type == 'light' && item.childrens && item.childrens.length > 0) {
            let childrens = configRoutes(item.childrens , type)
            return  <Lightbox key={item.name} hideNavBar hideTabBar>
                        {childrens}
                    </Lightbox>
        }
        return null
    })
}

let routes = configRoutes(routeConfigs , 'tab')

console.log(routes)

export default class RouteComponent extends Component {

    render() {
        return (
            <Router createReducer={reducerCreate}>
                <Modal key='app' onBackPress={onBackPress}>
                    {routes}
                </Modal>
            </Router>
        )
    }
}